<template>
  <div class="tablePadding">
    <div>
      <div class="left">
        <slot name="menuleft"></slot>
      </div>
      <div class="right">
        <slot name="menuright"></slot>
      </div>
      <div class="clear"></div>
    </div>

    <el-table 
    :data="tableData" 
    style="width: 100%" 
    :span-method="arraySpanMethod"
    >
      <template v-for="(item, index) in headerData">
          <el-table-column
          align="center"
          v-if="!item.slot && !item.children"
          :label="item.label"
          :key="item.id"
          :width="item.width"
          :prop="item.prop"
        >
        </el-table-column>
        <el-table-column
          v-else-if="!item.children && item.slot"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
          <template slot="header">
            <div>
              <span v-if="item.must" class="header-must">*</span>
              <span>{{ item.label }}</span>
            </div>
          </template>
          <template slot-scope="scope" v-if="item.slot">
            <div>
              <slot
                :name="item.prop"
                v-bind:row="scope.row"
                v-if="item.slot"
              ></slot>
            </div>
          </template>
        </el-table-column>
        <tableColumnChild
          v-else-if="item.children"
          :key="item.id"
          :columnHeader="item"
        >
        </tableColumnChild>
      </template>

      <!-- <el-table-column 
            v-for="(item,index) in headerData"
            :key="index"
            :prop="item.prop" 
            :label="item.label" 
            :width="item.width"
            >  -->

      <!-- slot  =>true 自己定义
                  slot =>false
                  must => true 必填
                       => false不必填  -->

      <!-- 定义表头 -->
      <!-- <template slot="header"> -->
      <!-- <div>
                       <span v-if="item.must" class="header-must">*</span>
                       <span>{{item.label}}</span>
                   </div>
               </template>
               <template slot-scope="scope"  >
                   <div>
                       <slot :name="item.prop" v-bind:row="scope.row" v-if="item.slot"></slot>
                       <div v-else>{{tableData[scope.$index][item.prop]}}</div>
                   </div>
               </template>
            </el-table-column>
             <el-table-column label="配送信息">
                 
             </el-table-column> -->
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import tableColumnChild from "@/components/tableColumnChild";
export default {
  name: "kwNineSuperTable",
  data() {
    return {
      currentPage4: 1,
    };
  },
  created() {
    let _self = this;
    _self.tableData.forEach((element, index) => {
      element.$index = index;
    });
  },
  components: {
    tableColumnChild,
  },
  // 当前子组件接收父组件传过来的值 我们使用peops接参
  props: {
      isrowList:{
          type:Array,
          default:()=>{
              return []
          }
      },
    // 是否显示操作
    isoperation: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 有分页时候显示的总条数
    total: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    // 该组件是否需要显示分页
    pagination: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 子组件接收的名字：{}
    headerData: {
      type: Array, //type定义类型 父组件传递的数据类型
      default: () => {
        // 如果父组件没有传递该值过来 那么默认是什么数据
        return [];
      },
    },
    tableData: {
      type: Array, //type定义类型 父组件传递的数据类型
      default: () => {
        // 如果父组件没有传递该值过来 那么默认是什么数据
        return [];
      },
    },
    // 带斑马纹表格 可以带可以不带 根据父组件传子组件决定
    // 带边框表格 可以带可以不带 根据父组件传子组件决定
    // 是否固定表头
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        let _self = this;
      
        // 拿到当前tableData的所在行数据的所有key值
        let keys = Object.keys(_self.tableData[rowIndex]);
        if(_self.isrowList.length != 0  ){
            // 判断当前单元格和下一个单元格的值相等
            if(_self.tableData[rowIndex][column.property] == 
              _self.tableData[rowIndex][_self.isrowList[columnIndex + 1]]){
                var rowspan= 0;//计数器
                console.log(11)
                for(let item of keys){
                    if(_self.tableData[rowIndex][item] == _self.tableData[rowIndex][column.property]){
                        rowspan++
                    }
                }
                return [1,rowspan]
            }else if(_self.tableData[rowIndex][column.property] == 
              _self.tableData[rowIndex][_self.isrowList[columnIndex - 1]]){
                  return [0,0]
            }
            
        }
      },
    handleClick(row) {
      console.log(row.$index);
      let _self = this;
      // this.$emit("父组件接收的名字",&第二个参数可不填用不到的话&传递给父组件的数据)
      // 子组件王父组件触发时间并且传递参数 用$emit
      _self.$emit("del", row.$index);
    },
    handleSizeChange(val) {
      let _self = this;
      // console.log(`每页 ${val} 条`);
      // 回去切换一页显示多少条
      _self.$emit("SizeChange", val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // val当前切换的第几页
      let _self = this;
      _self.$emit("CurrentChange", val);
    },
  },
};
</script>
<style scope>
.tablePadding {
  padding: 40px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
.header-must {
  color: red;
}
</style>